<template>
    <div class="Breadcrumb">
        <el-breadcrumb separator="/" class="biaoqian">
            <el-breadcrumb-item :to="{ path: '/studentInterface' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>人才培养方案</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
    </div>
    <div class="showUnTicketInfo">
        <div class="box-content">
            <el-table :data="dataList" height="450" style="width: 100%">
                <el-table-column label="年级" :show-overflow-tooltip="true" prop="grade" align="center" />
                <el-table-column label="专业" :show-overflow-tooltip="true" prop="majorName" align="center" />
                <el-table-column label="课程数" :show-overflow-tooltip="true" prop="courseCount" align="center" />
                <el-table-column label="操作" width="100px" align="center">
                    <template #default="scope">
                        <el-button @click="handleShow(scope.row)" :icon="View" size="mini"
                            style="width: 5px; height: 1px;  "></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination layout="prev, pager, next" :total=pageTotal :page-size="pageSize"
                    v-model:current-page="curPage" />
            </div>
        </div>
        <TalentPlanChart :showDialog="showDialog" @dialogClosed="handleDialogClosed" :planId="planId"></TalentPlanChart>
    </div>

</template>

<script>
import api from '@/api/api';
import { View } from '@element-plus/icons-vue'
import TalentPlanChart from '@/components/StudentComponents/TalentPlanChart.vue';

export default {
    components: {
        TalentPlanChart
    },
    mounted() {
        this.getData()
    },
    data() {
        return {
            dataList: [],
            curPage: 1,
            pageSize: 5,
            pageTotal: 0,
            showDialog: false,
            planId: ''
        }
    },
    methods: {
        getData() {
            api.training_program.page(this.curPage, this.pageSize)
                .then((res) => {
                    this.dataList = res.data.data.records
                    this.pageTotal = res.data.data.total
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        handleShow(row) {
            this.planId = row.id
            this.showDialog = true
        },
        handleDialogClosed() {
            this.showDialog = false
            this.getData()
        },
    },
    watch: {
        curPage(newValue, oldValue) {
            this.getData()
        }
    },
    computed: {
        View() {
            return View
        },
    }


}
</script>

<style></style>